<template>
	<view style="width: 100%;height: 100%;position: relative;background-color: black;">
		<!-- 顶部导航 -->
		<view class="top_daohang">
			<u-icon @click="back" name="arrow-left" color="#2979ff" size="60"></u-icon>

			<view class="right_daohang">
				<u-icon name="search" style="margin-right: 30px;" color="#2979ff" size="60"></u-icon>
				<u-icon name="more-dot-fill" color="#2979ff" size="60"></u-icon>
			</view>


		</view>

		<!-- 商品子组件循环 -->
		<bigCard :clickSkuInfo="clickSkuInfo" :skuList="skuList"></bigCard>
		
		<!-- <view class="">
			<bigCard :clickSkuInfo="clickSkuInfo"></bigCard>
		</view>
		<view class="detailCard" v-for="(recommendSkuInfo,index) in skuList" :key="recommendSkuInfo.id">
			<bigCard :recommendSkuInfo="recommendSkuInfo"></bigCard>
		</view> -->
	</view>
</template>

<script>
	import bigCard from './components/bigCard.vue'
	export default {
		data() {
			return {
				skuId: "",
				categoryId: "",
				current: 1,
				size: 2,
				pages:0,
				
				//用户点击的商品
				clickSkuInfo:{},

				
				//相同分类推荐的商品
				skuList:[]
			};
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			async getCommonSku(commonSkuVo) {
				let form = {
					categoryId: this.categoryId,
					skuId: commonSkuVo.skuId,
					current: this.current,
					size: 2
				}
				const result = await this.$u.api.getCommonSku(form);
				if(result.skuInfo !==null){
					this.clickSkuInfo = result.skuInfo
				}
				
				if(result.skuInfo !==null){
					this.categoryId = result.skuInfo.categoryId
				}
				
				this.skuList.push(...result.records);
				this.pages = result.pages
			}
		},
		components: {
			bigCard
		},
		mounted() {
			
		},
		onLoad(options) {
			this.skuId = JSON.parse(options.skuId)
			
			this.getCommonSku({skuId:this.skuId})
		},
		 onReachBottom() {
			
			if(this.pages >= this.current){
				this.current++
				
				let form = {
					categoryId: this.categoryId,
					current: this.current,
					size: 2
				}
				
				const result = this.getCommonSku(form)
				
				console.log(this.skuList);
			}else{
				console.log("触底理论");
			}
			
		
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.top_daohang {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60px 10px 0px 10px;
		position: fixed;
		z-index: 2;
		backdrop-filter: blur(10px);
		/* 背景模糊效果 */
		background-color: rgba(255, 255, 255, 0.5);
		/* 背景颜色 */


		.right_daohang {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.detailCard {
		margin-top: 20px;
	}
</style>